<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
    <head>
        <title>Tigua Reference</title>
        <meta http-equiv="content-language" content="en">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta name="author" content="David M. Lopez">
        <meta name="description" content="Canvas JavaScript Library">
        <meta name="keywords" content="JavaScript Library, Tigua, Canvas">
        <meta name="viewport" content="width=450; user-scalable=no">
        <link rel="stylesheet" type="text/css" media="screen,print" href="../util/log4javascript/main.css" title="Default" />
        <script src="../util/log4javascript/log4javascript.js" type="text/javascript" charset="utf-8"></script>
        <script src="../tigua.js" type="text/javascript" charset="utf-8"></script>

        <script>

        function startup() {
          var popuplog = false;
          if (popuplog) {
            var log = log4javascript.getDefaultLogger("main");
          } else {
            var log = log4javascript.getLogger("main");
            var appender = new log4javascript.BrowserConsoleAppender();
            appender.setLayout(new log4javascript.PatternLayout(log4javascript.ABSOLUTETIME_DATEFORMAT));
            log.addAppender(appender);
          }

          //attach to existing canvas in page
          var c = new tigua.canvas('cnvs');

          log.debug("Drawing tests");

          function background(config) {
            tigua.component.call(this,config);            
          }
          background.prototype = new tigua.component;
          background.prototype.render = function (ctx) {
            if (!this.lingrad) {
              this.lingrad = ctx.createLinearGradient(0,0,this.width,this.height);  
              this.lingrad.addColorStop(0.0, new tigua.color({h:36*5, s:100,v:75}));
              this.lingrad.addColorStop(1.0, new tigua.color({h:36*7, s:100,v:75}));
            } 
            ctx.fillStyle = this.lingrad;
            ctx.fillRect(0,0,this.width,this.height);
          }
          
          var b = new background({id:'background'});
          c.setBackground(b);
          //c.setBackground("#FFFFFF");

         var h = 360/8;
         function anim_callback(c,attr,task) {
             if (c.x > 200) {
                 c.toX = 10;
             } else {
                 c.toX = 240;
             }
         }

         var b = new tigua.widgets.button({
                    x:10,
                    y:10,
                    width:50,
                    height:50,
                    color:new tigua.color({h:0,s:80,v:80}),
                    text:'Linear',
                    textColor: "#111111",
                    toX:240,
                    h:0,
                    listeners: {
                        'click': function() {
                           this.moveTo(this.toX,10,1000,'linear',anim_callback);
                           this.attrTo('h',360,1000,'linear',function(c){
                              c.h=0;
                           });
                        }
                    }
             });
         var old_render = b.render;
         b.render = function(ctx,canvas) {
           this.color = new tigua.color({h:this.h,s:80,v:80});
           old_render.call(this,ctx,canvas);
         }

         c.addComponent(b);

         c.addComponent(
             new tigua.widgets.button({
                    x:10,
                    y:70,
                    width:50,
                    height:50,
                    color:new tigua.color({h:h*1,s:80,v:80}),
                    text:'<',
                    textColor: "#111111",
                    toX:240,
                    listeners: {
                        'click': function() {
                           this.moveTo(this.toX,70,1000,"<",anim_callback);
                           this.rotateTo(Math.PI*2,1000,'<',function(c){
                              c.angle=0;
                           });
                        }
                    }
             })
         );

         c.addComponent(
             new tigua.widgets.button({
                    x:10,
                    y:130,
                    width:50,
                    height:50,
                    color:new tigua.color({h:h*2,s:80,v:80}),
                    text:'>',
                    textColor: "#111111",
                    toX:240,
                    listeners: {
                        'click': function() {
                           this.moveTo(this.toX,130,1000,">",anim_callback);
                        }
                    }
             })
         );

         c.addComponent(
             new tigua.widgets.button({
                    x:10,
                    y:190,
                    width:50,
                    height:50,
                    color:new tigua.color({h:h*3,s:80,v:80}),
                    text:'<>',
                    textColor: "#111111",
                    toX:240,
                    toSize:100,
                    listeners: {
                        'click': function() {
                           this.moveTo(this.toX,190,1000,"<>",anim_callback);
                           this.sizeTo(this.toSize,this.toSize,1000,'elastic',function(c,attr,task) {
                              if (c.width > 50) {
                                  c.toSize = 50;
                              } else {
                                  c.toSize = 100;
                              }
                           });
                        }
                    }
             })
         );

         c.addComponent(
             new tigua.widgets.button({
                    x:10,
                    y:250,
                    width:50,
                    height:50,
                    color:new tigua.color({h:h*4,s:80,v:80}),
                    text:'backIn',
                    textColor: "#111111",
                    toX:240,
                    listeners: {
                        'click': function() {
                           this.moveTo(this.toX,250,1000,"backIn",anim_callback);
                        }
                    }
             })
         );

         c.addComponent(
             new tigua.widgets.button({
                    x:10,
                    y:310,
                    width:50,
                    height:50,
                    color:new tigua.color({h:h*5,s:80,v:80}),
                    text:'backOut',
                    textColor: "#111111",
                    toX:240,
                    listeners: {
                        'click': function() {
                           this.moveTo(this.toX,310,1000,"backOut",anim_callback);
                        }
                    }
             })
         );

         c.addComponent(
             new tigua.widgets.button({
                    x:10,
                    y:370,
                    width:50,
                    height:50,
                    color:new tigua.color({h:h*6,s:80,v:80}),
                    text:'elastic',
                    textColor: "#111111",
                    toX:240,
                    listeners: {
                        'click': function() {
                           this.moveTo(this.toX,370,1000,"elastic",anim_callback);
                        }
                    }
             })
         );

         c.addComponent(
             new tigua.widgets.button({
                    x:10,
                    y:430,
                    width:50,
                    height:50,
                    color:new tigua.color({h:h*7,s:80,v:80}),
                    text:'bounce',
                    textColor: "#111111",
                    toX:240,
                    listeners: {
                        'click': function() {
                           this.moveTo(this.toX,430,1000,"bounce",anim_callback);
                        }
                    }
             })
         );

          c.render();
          //c.startAnimation(10);
        }
        </script>
    </head>
    <body onload="startup();">
      <canvas id="cnvs" width="300" height="500"></canvas>
    </body>
</html>
